<template>
  <div class="classify-container">
    <van-nav-bar
      title="分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="search-container">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>

    <div class="content-container">
      <!-- 左侧分类列表 -->
      <div class="category-list">
        <div
          v-for="(item, index) in classifyList"
          :key="item.id"
          class="category-item"
          :class="{ active: activeIndex === index }"
          @click="selectCategory(item.id, index)"
        >
          {{ item.name }}
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="product-list">
        <div class="category-title">{{ currentCategory?.name || '推荐分类' }}</div>
        <div class="products-grid">
          <div class="sub-items">
            <div 
              class="sub-item" 
              v-for="item in products" 
              :key="item.id"
            >
              <img :src="item.image" :alt="item.name">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getClassify } from '@/api/product/classify';
import { useRouter } from 'vue-router';

const router = useRouter();
const value = ref(''); // 搜索关键词
const activeIndex = ref(0); // 当前选中的分类索引
const currentCategory = ref(null); // 当前选中的分类
const classifyList = ref([]); // 分类列表
const products = ref([]); // 商品列表

// 获取分类数据
const getClassifyData = async () => {
  try {
    const res = await getClassify();
    if (res.code === 200) {
      classifyList.value = res.data;
      // 默认选中第一个分类
      if (classifyList.value.length > 0) {
        currentCategory.value = classifyList.value[0];
        // 设置子分类商品数据
        products.value = currentCategory.value.children || [];
      }
    }
  } catch (error) {
    console.error('获取分类数据失败:', error);
  }
};

// 选择分类
const selectCategory = (categoryId, index) => {
  activeIndex.value = index;
  currentCategory.value = classifyList.value[index];
  // 更新子分类商品数据
  products.value = currentCategory.value.children || [];
};

// 搜索处理
const onSearch = (val) => {
  if (!val) return;
  
  // 在所有分类及其子分类中搜索
  const searchResults = [];
  classifyList.value.forEach(category => {
    if (category.children) {
      const matchedChildren = category.children.filter(child => 
        child.name.toLowerCase().includes(val.toLowerCase())
      );
      searchResults.push(...matchedChildren);
    }
  });
  
  products.value = searchResults;
};

// 取消搜索
const onCancel = () => {
  value.value = '';
  // 重置为当前分类的商品列表
  if (currentCategory.value) {
    products.value = currentCategory.value.children || [];
  }
};

// 返回上一页
const onClickLeft = () => {
  router.back();
};

// 页面加载时初始化数据
onMounted(() => {
  getClassifyData();
});
</script>

<style scoped>
.classify-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-container {
  padding: 8px;
}

.content-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.category-list {
  width: 90px;
  background-color: #f7f8fa;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.category-item {
  padding: 16px 12px;
  font-size: 14px;
  color: #333;
  text-align: center;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.category-item.active {
  color: #1989fa;
  background-color: #fff;
  border-left-color: #1989fa;
}

.product-list {
  flex: 1;
  overflow-y: auto;
  background-color: #fff;
}

.category-title {
  font-size: 16px;
  font-weight: bold;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.sub-category {
  margin-bottom: 20px;
}

.sub-title {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
}

.sub-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 12px;
}

.sub-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sub-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.sub-item span {
  font-size: 12px;
  color: #333;
  line-height: 1.2;
}

.products-grid {
  padding: 12px 0;
}
</style>
